<template>
  <div>
    <div id="mine_h">
      <header class="top_bar">
        <div @click="goMain" class="icon_back"></div>
        <h3 class="cartname">我的足迹</h3>
      </header>
    </div>
    <div>.</div>
    <div>.</div>
    <div>.</div>
    <div class="home_m" style="overflow: hidden">
      <div class="m_layout">
        <div class="footPrint_tip clearfix" v-if="login == false">
          <span>登录后可同步电脑与手机足迹中的商品</span>
          <router-link to="/login" class="login">登录</router-link>
        </div>
        <div class="no-footprint" v-if="footprintList.length <= 0" style="text-align: center">
          <div class="c">
            <img style="width: 50%" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" />
            <br />
            <span>没有浏览足迹</span>
          </div>
        </div>
        <div class="not_eng_item" v-for="item in footprintList" :key="item.id" style="height: 330px" v-infinite-scroll="handleBottomChange" infinite-scroll-distance="10">
          <span class="footTime" style="margin-bottom: 0px;height: 10px;font-size: 15px">{{item[0].addTime}}</span>
          <div class="not_eng_item" v-for="(iitem,indexx) in item" :key="indexx" style="height: 100px">
            <router-link class="not_eng_link" :to="'/detail/'+iitem.goodsId" @click="goPage()" style="width: 200%;height: 10px" v-if="item.length > 0">
              <img v-lazy="iitem.picUrl" class="not_eng_pic lazy-img-fadein" style="margin-top: 0px;opacity: 100 ! important;" />

              <div class="not_eng_info" style="text-align: center">
                <span class="not_eng_title" style="overflow: hidden;text-overflow: ellipsis;
						white-space: nowrap; ">{{iitem.name}}</span>
              </div>
              <div class="collect_info clearfix" style="text-align: center">
                <span class="subtitle" style="overflow: hidden;text-overflow: ellipsis;
						white-space: nowrap;width: 93% ">{{iitem.brief}}</span>
              </div>
              <div>
                <span style="font-size: 15px;color: red" class="price">￥{{iitem.retailPrice}}</span>
              </div>
            </router-link>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Button, Field, InfiniteScroll, Loadmore } from '../../node_modules/mint-ui'
export default {
  components: {
    Button,
    Field,
    Loadmore,
    InfiniteScroll
  },
  data() {
    return {
      footprintList: [],
      page: 1,
      size: 10,
      totalPages: 1,
      remindValue: ['', '', '赠送'],
      plusFlag: ['', '+', '  '],
      login: 'a'
    }
  },
  created() {
    this.getFootprintList()
    this.isLogin()
  },
  methods: {
    goMain() {
      var _this = this
      _this.$router.push('/mine')
    },
    getFootprintList() {
      let _this = this
      if (window.sessionStorage.userInfo) {
        let uObj = JSON.parse(window.sessionStorage.userInfo)
        console.log(uObj)
        let userId = uObj.id
        _this.$http
          .get('/mechanism/footprint/list', {
            params: {
              userId: userId,
              page: _this.page,
              size: _this.size
            }
          })
          .then(res => {
            if (res.data.errno === 0) {
              let f1 = _this.footprintList
              let f2 = res.data.data.footprintList
              console.log(f2.length + 'f2')
              for (let i = 0; i < f2.length; i++) {
                let last = f1.length - 1
                if (last >= 0 && f1[last][0].addTime === f2[i].addTime) {
                  f1[last].push(f2[i])
                } else {
                  let tmp = []
                  tmp.push(f2[i])
                  f1.push(tmp)
                }
              }

              _this.footprintList = f1
              _this.totalPages = res.data.data.totalPages
              console.log(_this.totalPages + 'res')
              console.log(f1.length + 'f1')
            }
          })
      }
    },
    isLogin() {
      if (window.sessionStorage.userInfo) {
        console.log(this.login + 'login')
        this.login = true
        console.log(window.sessionStorage.userInfo)
      } else {
        this.login = false
      }
    },
    handleBottomChange() {
      this.loading = true
      setTimeout(() => {
        if (this.totalPages > this.page) {
          this.page = this.page + 1
          this.getFootprintList()
        }
        this.loading = false
      }, 1500)
    }
  }
}
</script>
